<template>
    <div class="maintainDetail zy-content">
      <back-level :goPage="back"/>
      <Card title="点检计划" class="detail-content-layout">
        <div class="titleItem">
          <div class="checkObject">
            <div class="checkObjectItem">
              <div class="checkObjectName">点检计划</div>
              <div class="checkObjectValue">
                <Tooltip max-width="200">
                  <div class="over-wrapper">{{ effPlanDetail.planName }}</div>
                  <div slot="content">
                    <p>{{ effPlanDetail.planName }}</p>
                  </div>
                </Tooltip>
              </div>
            </div>
            <!-- <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('设备等级') }}</div>
              <div class="checkObjectValue">{{ effPlanDetail.deviceGrade}}</div>
            </div>

            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('设备类别') }}</div>
              <div class="checkObjectValue">{{ effPlanDetail.deviceCategory }}</div>
            </div> -->
            <div class="checkObjectItem">
              <div class="checkObjectName">点检周期</div>
              <div class="checkObjectValue">{{ effPlanDetail.cycleUnit }}</div>
            </div>
          </div>
        </div>
      </Card>
      <Card title="点检对象" class="detail-content-layout mt16">
        <div class="contentTable">
          <Table @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'MaintenanceObjectDetail')}" class="resizable-table" border  ref="selection" :columns="columns" :data="effPlanDetail.ddevSpotCheckPlanRefs"></Table>
        </div>
      </Card>
      <Card title="点检内容" class="detail-content-layout mt16">
        <div class="contentTable">
          <Table @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'MaintenanceContentDetail')}" class="resizable-table" border  ref="selection" :columns="contentColumns" :data="effPlanDetail.ddevSpotCheckPlanSpotCheckRefs">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" @click="checkToolInfo(row)">
                <Icon type="md-eye" size='18'/>查看工具和物料</span>
            </template>
          </Table>
        </div>
      </Card>
      <Card title="点检时间" class="detail-content-layout mt16">
        <div class="titleItem">
          <div class="checkObject">
            <div class="checkObjectItem">
              <div class="checkObjectName"></div>
              <div class="checkObjectValue">{{ effPlanDetail.maintainName }}</div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.TriggerInterval') }}</div>
              <div class="checkObjectValue">{{ effPlanDetail.cycleUnit }}</div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.createTime') }}</div>
              <div class="checkObjectValue">{{ effPlanDetail.firstTime }}</div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.planEndTime') }}</div>
              <div class="checkObjectValue">{{ effPlanDetail.endTime }}</div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.Confirmed') }}</div>
              <div class="checkObjectValue">{{ iscofirmList[Number(effPlanDetail.isConfirm)] }}</div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.Taskduration') }}</div>
              <div class="checkObjectValue">{{ `${effPlanDetail.liveTimeD}天${effPlanDetail.liveTimeH}小时` }}</div>
            </div>
          </div>
        </div>
      </Card>
        <Modal :mask-closable="false"
            v-model="visible"
            :title="`${$t('common.Detail')}`"
            class="checkContentModal"
            width='1200'
            footer-hide
        >
          <contentDetail :formInlineShow="formInlineShow" :materData="materData" :planToolList="toolList"></contentDetail>
        </Modal>
    </div>
</template>

<script>
import contentDetail from './contentDetail.vue'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "maintainDetail",
    mixins:[toggleTableOperation],
    components: {
        contentDetail
    },
    props: ['effPlanDetail'],
    data() {
        return {
          formInlineShow:true,
          deviceCategoryList: [],
            iscofirmList: ['否', '是'],
            formInline: {},
            text: '',
            visible: false,
            materData: [],
            toolList: [],
            position: [{name: "全部", key: ""}],
            classification: [{name: "全部", key: ""}],
            // checkObject: [
            //     {name: '计划名称', value: 'cnc设备定期点检'},
            //     {name: '设备类别', value: 'cnc'},
            //     {name: '点检位置', value: '主轴'},
            //     {name: '点检分类', value: '润滑'},
            // ],
            // checkTime: [
            //     {name: '点检方式', value: '定期点检'},
            //     {name: '触发间隔', value: '次/日'},
            //     {name: '首次生成时间', value: '2021年9月15日 16:38:50'},
            //     {name: '计划截止时间', value: '2021年9月15日 16:38:50'},
            //     {name: '任务存活时间', value: '1天3小时'},
            // ],
            checkContent: [
                {name: '点检项目', value: '主轴清洗'},
                {name: '点检方法', value: '主轴清洗'},
            ],
            columns: [
                // {
                //   type: 'index',
                //   width: 60,
                //   title: `${ this.$t('common.index') }`,
                //   align: 'center'
                // },
                {title: `${this.$t('common.company')}`, key: "belongCompanyName", align: 'center', width:300,
                  resizable: true},
                {
                    title: `${this.$t('common.Installation')}`,
                    key: "installPositionName",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                    width:300,
                    resizable: true
                },
                {
                    title: `${this.$t('maintenance.EquipmentName')}`,
                    key: "deviceName",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                    width:300,
                    resizable: true
                },
                {
                    title: `${this.$t('maintenance.EquipmentNo')}`,
                    key: "deviceNo",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                    width:300,
                    resizable: true
                },
                {
                    title:'设备类别',
                    key: "deviceNo",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                    width:300,
                    resizable: true
                },
                {
                    title:'设备等级',
                    key: "deviceGrade",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: '设备类别',
                    key: "deviceCategory",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('equipCheck.Model')}`,
                    key: "deviceSpec",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true,
                },
            ],
            levelList: [
                {name: "一级点检", key: 1},
                {name: "二级点检", key: 2},
                {name: "三级点检", key: 3},
            ],
            contentColumns: [
                // {
                //     title:'点检级别',
                //     key: 'itemLevel',
                //     align: 'center',
                //     width: 180,
                //     tooltip: true,
                //     render: (h, params) => {
                //         return h('div', [
                //             h('span', {}, this.levelList.find(val => val.key === params.row.itemLevel).name)
                //         ])
                //     },
                //   resizable: true
                // },
                {
                  title: `${this.$t('显示顺序')}`,
                  key: 'sort',
                  align: 'center',
                  width: 200,
                  tooltip: true,
                  resizable: true
                },
                {
                    title:'点检项目',
                    key: 'checkName',
                    align: 'center',
                    width: 360,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: '点检方法',
                    key: 'checkMode',
                    align: 'center',
                    width: 250,
                    tooltip: true,
                  resizable: true
                },
                {
                    title: `${this.$t('maintenance.workinghours')}`,
                    key: 'manHour',
                    align: 'center',
                    width: 220,
                    tooltip: true,
                  resizable: true
                },
                // {
                //     title: `${this.$t('maintenance.UpperLimit')}`,
                //     key: 'maxValue',
                //     align: 'center',
                //     minWidth: 100,
                //     tooltip: true
                // },
                {
                    title: `${this.$t('maintenance.numberRequirements')}`,
                    key: 'reqPnum',
                    align: 'center',
                    width: 220,
                    tooltip: true,
                    resizable: true
                },
                // {
                //     title:'点检标准',
                //     key: 'unitName',
                //     align: 'center',
                //     width: 180,
                //     tooltip: true,
                //     resizable: true
                // },
                // {
                //   title: `${ this.$t('点检位置') }`,
                //   key: 'bomOrg',
                //   align: 'center',
                //   minWidth: 200,
                //   tooltip: true,
                //   resizable: true
                // },
                // {
                //   title: `${ this.$t('common.operation') }`,
                //   slot: 'action',
                //   minWidth: 200,
                //   align: 'center',
                //   // fixed:"right"
                // },
            ],
            contentData: [
                {content: '刀库刀套清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
                {content: '打黄油', checkFunction: '无松动', company: '--', up: '--', down: '--'},
                {content: '主轴风扇清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
            ],
            total: 64,
            pageSize: 10,
            pageNum: 1,
            pageSizeOption: [10, 20, 30, 40],
        }
    },
  created() {

      this.getColumnWidth(this.contentColumns,'MaintenanceContentDetail')
      this.getColumnWidth(this.columns,'MaintenanceObjectDetail')
    // this.getFaultCategory("设备类型")
  },
    methods: {
      checkToolInfo(row){
        this.visible = true
        this.getWlDetail(row.itemId || row.id)
      },
      getWlDetail(itemId) {
        this.axios({
          method: 'get',
          url: '/dms/dcmMaintainItem/queryById',
          params: {
            id: itemId
          }
        }).then(res => {
          if (res.code === 200) {
            this.formInline = {
              ...res.data,
              triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.split(',') : [],
              minValue: res.data.minValue ? Number(res.data.minValue) : '',
              maxValue: res.data.maxValue ? Number(res.data.maxValue) : ''
            }
            if (this.formInline.itemLevel) {
              this.formInline.itemLevel = this.levelList.find(val => val.key === this.formInline.itemLevel).name
            }
            // if (this.formInline.deviceGrade){
            //   this.categorySelectChange(this.formInline.deviceGrade)
            // }
            this.toolList = res.data.dcmMaintainToolList.map(item => {
              return {
                ...item,
                isEdit: false,
              }
            })
            this.materData = res.data.dcmMaintainMaterialList.map(item => {
              return {
                ...item,
                isEdit: false,
              }
            })

            // this.materialList = res.data.materialList
            // this.toolList = res.data.toolList
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      },
      deviceNameChange(val) {
        if (val) {
          this.searchParams.deviceCategory = val
        }
      },
      //获取故障数据
      getFaultCategory(name) {
        this.axios({
          method: 'get',
          url: '/dms/faultCategory/basicDict',
          params: {name}
        }).then(res => {
          if (res.code === 200) {

            if (name === '故障分类') {
              this.faultCategoryList = res.data.map(item => {
                if (item.value) return item;
              })
            } else if (name === '设备类型') {
              this.deviceCategoryList = res.data.map(item => {
                if (item.value) return item;
              })
            }
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
          }
        })
      },
        back() {
            this.$emit('changeDetailVisible', false, this.effPlanDetail.id)
        },
        changePageNum() {
        },
        changePageSize() {
        }
    }
}
</script>
<style lang="scss">
.maintainDetail {
    background: #fff;

    .title {
        display: flex;
        justify-content: flex-start;
        font-size: 20px;
        padding: 10px;
        border-bottom: 1px solid #dddddd;
        align-items: center;

        .back {
            color: #187BDB;
            font-size: 16px;
            padding-left: 20px;
            cursor: pointer;
            float: right;
        }
    }

    .titleItem {
        position: relative;
        font-size: 18px;
        //font-weight: bold;
        padding: 0;

        .checkObject {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            font-style: normal;
            letter-spacing: normal;
            /*border-bottom: 2px solid #D7D7D7;*/
            .checkObjectItem {
                display: flex;
                flex: 33.33%;
                flex-wrap: wrap;

                .checkObjectName {
                    height: 40px;
                    line-height: 40px;
                    width: 100%;
                    border: 1px solid #EEEEEE;
                    background: #F5F6F7;
                    text-align: left;
                    padding: 0 10px;
                    color: #999999;
                    font-size: 13px;
                }

                .checkObjectValue {
                    height: 40px;
                    line-height: 40px;
                    width: 100%;
                    border: 1px solid #EEEEEE;
                    padding-left: 10px;
                    color: #333333;
                    font-size: 13px;
                }
            }
        }

        .searchBox {
            .label {
                display: flex;
            }
        }

    }

    .contentTable {
        margin: 0;
      .operationBtn{
        //display: flex;
        //justify-content: center;
        //align-items: center;
        padding: 0 5px;
        //color: #035beb;
      }
    }

    .titleItem::before {
      display: none;
        //content: '';
        //position: absolute;
        //width: 3px;
        //height: 20px;
        //top: 12px;
        //left: 0px;
        //background: #187BDB;
    }
}

.over-wrapper {
    width: 200px;
    /*height: 23px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
